<template>
  <div style="position: absolute; width: 100%; top: 0px; bottom: 0px;" id="DataBottomRight"></div>
</template>
<script>
  import Q from './lib/qunee-es.js';
  import request from '@/utils/request';
  export default {
    mounted() {
      var graph = new Q.Graph('DataBottomRight');

      /**
       * 创建节点
       */
      function createNode(name, from) {
        var node = graph.createNode(name);
        if (from) {
          graph.createEdge(from, node);
        }
        return node;
      }

      /**
       * 初始化数据
       */
      function requestQunee() {
        request({
          url: '/bigScreen/tmOrganization',
          method: 'post'
        }).then((response) => {
          //console.log(response);
          createRootNode(response)
        })
      }




      /**
       * 递归qunee 根结点
       */
      function createRootNode(json) {
        //camp数据处理
        var campArray = json["collection"];
        // console.log(campArray)
        // //删除数组第一个元素
        campArray.shift(0);
        console.log(campArray)
        var campArraySize = campArray.length;
        while (campArraySize > 0){
          var campName = campArray[campArraySize-1];
          var camp = createNode(campName);
          imageSelector(camp,3);
          camp.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM;

          //camp下第一层根结点的数据处理
          var campRootArray = json[campName];
          var campRootArraySize = campRootArray.length;
          while (campRootArraySize > 0){
            var index = campRootArraySize-1;
            var name = campRootArray[index].orgName+'-'+campRootArray[index].orgId;
            var campRoot = createNode(name,camp);
            var nodeType = campRootArray[index].orgType;
            imageSelector(campRoot,nodeType);
            campRoot.parentChildrenDirection = Q.Consts.DIRECTION_RIGHT;
            campRoot.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;
            //camp下第二层节点的数据处理
            var parentNodeInfo = campRootArray[index];
            var parentNode = campRoot;
            createNodeRecursion(parentNodeInfo,parentNode,json);
            campRootArraySize--;
          }
          campArraySize--;
        }
        Unfold();
      }

      /**
       * 递归qunee子节点
       */
      function createNodeRecursion(parentNodeInfo,parentNode,json) {
        var key = parentNodeInfo.orgId;
        var childrenRootArray = json[key];
        var childrenRootArraySize = childrenRootArray.length;
        while (childrenRootArraySize > 0){
          var index = childrenRootArraySize-1;
          var name  = childrenRootArray[index].orgName+'-'+childrenRootArray[index].orgId;
          var childrenRoot = createNode(name,parentNode);
          var nodeType = childrenRootArray[index].orgType;
          imageSelector(childrenRoot,nodeType);
          childrenRoot.parentChildrenDirection = Q.Consts.DIRECTION_RIGHT;
          childrenRoot.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;
          var childrenRootInfo = childrenRootArray[index];
          createNodeRecursion(childrenRootInfo,childrenRoot,json);
          childrenRootArraySize--;
        }
      }


      /***
       * 节点图片选择器
       */
      function imageSelector(node,nodeType) {
        if (nodeType == 2){
          node.image='Q-exchanger2'
        }
        if (nodeType == 3){
          node.image ='Q-server';
        }
      }



      requestQunee();

      /**
       * 展开节点
       */
      function Unfold() {
        var layouter = new Q.TreeLayouter(graph);
        layouter.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL;
        layouter.doLayout({
          callback: function () {
            graph.zoomToOverview();
          }
        });
      }

      /**
       *双击修改信息
       */
      graph.ondblclick = function (evt) {
        var node = graph.getElementByMouseEvent(evt);
        if (node) {
          var newName = prompt("New Name:");
          if (newName) {
            console.log(node.name);
            node.name = newName;
            console.log(node.name)
          }
        }
      }
    }

  }


</script>
